<!-- 售后进度  -->
<template>
  <s-layout title="物流详情">
    <view class="goods">
      <view class="main-img">
        <image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250416/e7a91c64184dcd5646b290bf14be3b86.png" mode="aspectFit"></image>
      </view>
      <view class="info">
        <view class="item">物流公司：{{ state.refundInfo?.express_name }}</view>
        <view class="item">
          <text>物流单号：{{ state.refundInfo?.express_number }}</text>
          <button class="copy-btn ss-reset-button" hover-class="button-hover" @click="onCopy">复制单号</button>
        </view>
      </view>
    </view>
    <view class="logist-status">
        <view class="title">物流状态</view>
        <view class="status">{{ signStatus }}</view>
      </view>
    <view class="log-box">
      <view  v-for="(item, index) in state.info" :key="item.title">
        <log-item :item="item" :index="index" :data="state.info"></log-item>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import { computed, reactive } from 'vue';
  import logItem from './logistics-item.vue';

  const state = reactive({
    active: 1,
    list: [
      {
        title: '买家下单',
        desc: '2018-11-11',
      },
      {
        title: '卖家发货',
        desc: '2018-11-12',
      },
      {
        title: '买家签收',
        desc: '2018-11-13',
      },
      {
        title: '交易完成',
        desc: '2018-11-14',
      },
    ],
    refundInfo: {},
  });
  // computed 计算属性
  const signStatus = computed(() => {
    return state.info.return_sign == 1 ? '已签收' : '未签收';
  });
  async function getDetail(id) {
    const { data } = await sheep.$api.order.aftersale.detail(id);
    console.log(data, 'datagetDetail');
    state.refundInfo = data.aftersale_refund;
 
    state.info = data.logs;
  }

  const onCopy = () => {
    sheep.$helper.copyText(state.refundInfo?.express_number);
  };

  onLoad((options) => {
    state.aftersaleId = options.id;
    getDetail(options.id);
  });
</script>

<style lang="scss" scoped>
  .log-box {
    padding: 24rpx 24rpx 24rpx 40rpx;
    background-color: #fff;
  }
  .goods {
    display: flex;
    border-bottom: 1rpx solid #f2f2f2;
    padding: 20rpx;
    margin-top: 4rpx;
    background-color: #fff;
    .main-img {
      width: 100rpx;
      height: 100rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      margin-left: 10rpx;
      .item {
        font-size: 28rpx;
        color: #333;
        display: flex;
        align-items: center;
      }
      .copy-btn {
        padding: 4rpx 10rpx 4rpx 20rpx;
      }
    }
    
  }
  .logist-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #f2f2f2;
    padding: 20rpx 40rpx;
    background-color: #fff;
    .title {
      font-size: 28rpx;
      color: #999;
    }
    .status {
      font-size: 28rpx;
      color: #333;
    }
  }
</style>
